<template>
    <div class="mapbox" v-if="showMap">
        <div id="googleMap" v-if="showMap" v-loading="loading"></div>
        <div class="scbox">
            <input type="text" id="tipinput" placeholder="输入关键字搜索" />
        </div>
    </div>
</template>

<script>
import map from '@/utils/googleMap.js'
export default {
    props:{
        showMap:{
            type:Boolean,
            default:false
        },
        center:String,
        point:{
            type:Object,
            default:{}
        },
    },
    components:{
        
    },
    data(){
        return{
            map:null,
            findData:'',
            keyword:'',
            loading:true
        }
    },
    async created(){
        await map.init() 
        setTimeout(()=>{
            this.createMap()
        },4000)
        
    },
    async mounted() {
        
    },
    methods:{
        createMap(){
            this.loading = false
            console.log('开始创建地图....')
            let mapProp = {
                center:new google.maps.LatLng(51.508742,-0.120850),
                zoom:7,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            let map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        },
        initInputTips(){
               
        }
    }
}
</script>

<style lang="scss" scoped>
    #container{
        width: 100%;
        height: 500px;
    }
    .mapbox{
        position: relative;
        z-index: 10;
        .scbox{
            background: #eee;
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            input{
                border: 1px solid #ddd;
                height: 40px;
                line-height: 26px;
                width: 400px;
                padding: 0 15px;
            }
        }
    }
</style>
<style>
    .tangram-suggestion-main{
        z-index: 8000;
    }
</style>